<template>
  <div class="borrow-list-back">
    <div class="borrow-card-up">
        借阅信息
    </div>

    <div class="borrow-card">
      <el-row>
        <br>
          <el-col :span="15" v-for="data in tabledata" :key="data" >
          <el-card :body-style="{ padding: '0px' }" class="book-card" shadow="hover" @click.native="book(data.id)">
            <img :src="require('@/assets/normal/' + data.image)" class="image">
            <!-- require('@/assets/normal/' + data.image) -->
            <div class="book-name">
                {{data.bookName}}
            </div>
            <div class="book-agree">
                {{data.isAgree == 1 ? "借阅成功":"待审核"}}
            </div>
            <div class="book-but">
              <el-button type="primary" plain @click.stop="returnbook(data.id)">归还</el-button>
            </div>
          </el-card>
          <br>
        </el-col>
      </el-row>
    </div>

    <div class="borrow-card-up-ferm">
        审核信息
    </div>
    <div class="borrow-card-ferm">
      <el-row>
        <br>
          <el-col :span="15" v-for="data in tabledataferm" :key="data" >
          <el-card :body-style="{ padding: '0px' }" class="book-card" shadow="hover" @click.native="book(data.id)">
            <img :src="require('@/assets/normal/' + data.image)" class="image">
            <!-- require('@/assets/normal/' + data.image) -->
            <div class="book-name">
                {{data.bookName}}
            </div>
            <div class="book-agree">
                {{data.isAgree == 1 ? "借阅成功":"待审核"}}
            </div>
            <div class="book-return">
                {{ data.isReturn == 0 ? "待归还":"已归还待审核" }}
            </div>
          </el-card>
          <br>
        </el-col>
      </el-row>
    </div>
    <transition name="el-fade-in">

    </transition>
    <div>
      
    </div>
  </div>
</template>

<script>
import 'element-ui/lib/theme-chalk/base.css';
import axios from "axios"
export default {
    data () {
        return {
          tabledata:[],
          tabledataferm:[],
          borrowTime:'',
          returnTime:'',
        }
    },
    methods: {
        getinfo(){
          axios.get(this.url + "/borrow/list",{
              params:{
                "id":localStorage.getItem("id")
              }
            }).then((res) => {
              if(res.data.code == 1){
                this.tabledata = res.data.data
              }
            }).catch(() => {
              this.$message.error("信息加载失败")
            });
            axios.get(this.url + "/borrow/listr",{
              params:{
                "id":localStorage.getItem("id")
              }
            }).then((res) => {
              if(res.data.code == 1){
                this.tabledataferm = res.data.data
              }
            }).catch(() => {
              this.$message.error("信息加载失败")
            });
          },

        returnbook(val){
          axios.put(this.url + "/borrow/return",{
            "id":val
          }).then((res) => {
            if(res.data.code == 1){
              this.$message.success("操作成功")
              this.getinfo()
            }
          }).catch(() => {
            this.$message.error("操作失败")
          });
        },

        async book(val){
          await axios.get(this.url + "/borrow/borrowinfo",{
          params:{
            "id":val
          }}).then((res) => {
            if(res.data.code == 1){
              this.borrowTime = res.data.data.borrowTime
              this.returnTime = res.data.data.returnTime
          }
          }).catch(() => {
            this.$message.error("信息加载失败")
          });
          

          /* <div style="text-align: left;font-size:15px;">状态:'+  this.returnTime > new Date()?'超期':'正常'</div> */
          this.$alert('<div style="text-align: left;font-size:20px;line-height: 40px;"><strong><span>借书日期: </span></strong>'+this.borrowTime+'<br><strong><span>归还日期: </span></strong>'+this.returnTime+'</div>', '还书信息', {
          dangerouslyUseHTMLString:true,
          confirmButtonText: '确定',
          callback:() => {
            this.borrowTime="",
            this.returnTime=''
          }
        });
        }
    },
    mounted () {
        axios.get(this.url + "/borrow/list",{
          params:{
            "id":localStorage.getItem("id")
          }
        }).then((res) => {
          if(res.data.code == 1){
            this.tabledata = res.data.data
          }
        }).catch(() => {
          this.$message.error("信息加载失败")
        });
        axios.get(this.url + "/borrow/listr",{
          params:{
            "id":localStorage.getItem("id")
          }
        }).then((res) => {
          if(res.data.code == 1){
            this.tabledataferm = res.data.data
          }
        }).catch(() => {
          this.$message.error("信息加载失败")
        });
    }
}
</script>

<style scoped>
  .borrow-list-back{
        position: relative;
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
        background-color:aliceblue;
        background-image: url("../assets/image/borrowlist.png");
        background-size: cover; 
        opacity: 1;
        overflow-y:scroll;
        overflow-x:hidden;
  }
  .borrow-card{
    position: absolute;
    top: 7%;
    left: 1%;
    width: 600px;
    height: 600px;
    opacity: 0.8;
    border-radius: 15px;
    background-color:aliceblue;
    overflow-y:scroll;
    overflow-x:hidden;
  }

  .borrow-card-ferm{
    position: absolute;
    top: 7%;
    left: 45%;
    width: 600px;
    height: 600px;
    opacity: 0.8;
    border-radius: 15px;
    background-color:aliceblue;
    overflow-y:scroll;
    overflow-x:hidden;
  }

  .image {
    width: 100px;
    height: 100px;
    display: block;
  }

  .clearfix:before,
  .clearfix:after {
      display: table;
      content: "";
  }
  
  .clearfix:after {
      clear: both
  }

  .book-card{
        position: relative;
        left: 2%;
        width: 580px;
        height: 100px;
        background-color: rgb(255,255,255,1);
        border-radius: 15px;
        cursor: pointer;
    }



    .book-name{
      position: absolute;
      left:26%;
      top:40%;
      width: 120px;
      height: 120px;
      font-size: 18px;
    }
    .book-but{
      position: absolute;
      right:0%;
      top:36%;
      width: 120px;
      height: 120px;
      font-size: 18px;
      opacity: 0.9;
    }
    .book-agree{
      position: absolute;
      left:54%;
      top:40%;
      width: 120px;
      height: 120px;
      font-size: 18px;
      color:chocolate;
    }

    .book-return{
      position: absolute;
      left:76%;
      top:40%;
      width: 120px;
      height: 120px;
      font-size: 18px;
      color:chocolate;

    }

    .borrow-card-up{
      position: absolute;
      font-size: 20px;
      color: aliceblue;
      padding: 15px;
      left:1%;
      top:0%;
      border-radius: 20px;
      z-index: 800;
    }

    .borrow-card-up-ferm{
      position: absolute;
      font-size: 20px;
      color: aliceblue;
      padding: 15px;
      left:45%;
      top:0%;
      border-radius: 20px;
      z-index: 800;
    }

</style>